<template>
  <el-container  class="height100    domainMainContent containerHeight">
    <el-main class="el-mainContent  height100 overflowYHidden"   ref="managerMain">
    <!-- <el-breadcrumb separator="/"> -->
      <!-- <el-breadcrumb-item :to="{ path: '/main' }">{{$t('location_domain')+$t("enterprise_list")}}</el-breadcrumb-item> -->
    <!-- </el-breadcrumb> -->
    <header_item  :headerArr="headerArr"  @onBtnClick="onBtnClick" />
      
      <div  class="width100 overflowy containerContentHeight">
      <el-form
        ref="form"
        :model="content"
        label-position="top"
        label-width="180px"
        size="mini"
        :rules="rules"
        class="content"
      >
      <el-row>
        <el-col :span="6">
          <el-row >
          <el-col>
            <el-form-item :label="$t('enterprise_name')"   prop="name">
              <el-input v-model="content.name"></el-input>
            </el-form-item>
          </el-col>
         
        </el-row>

        <el-row>
          <el-col >
            <el-form-item   >
              <template slot="label">
                <span class="greyColor">{{$t('smsMemberCode')}}</span>
              <span><a
                href="http://sms.teemlink.com/sms/register/register.jsp"
                target="_blank"
                class="tip-text"
              >[{{$t('noAccount')}}]</a></span>
              </template>
              <el-input v-model="content.smsMemberCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item  >
              <template slot="label">
                <span class="greyColor">{{$t('smsMemberPwd')}}</span>
              <span><a
                href="http://sms.teemlink.com/sms/"
                target="_blank"
                class="tip-text"
              >[{{$t('wantToChangePwd')}}]</a></span>
              </template>
              <el-input type="password" v-model="content.smsMemberPwd" style="width: 64%"></el-input>
              <el-button
                type="primary"
                plain
                class="obpm-btn obpm-btn-default"
                @click="testSMS"
              >{{$t('testSMS')}}</el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item  :label="$t('systemName')"  >
              <el-input v-model="content.systemName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item>
              <span class="greyColor marginR34">{{$t('status')}}</span>
              <el-switch v-model="status"></el-switch>
            </el-form-item>
        </el-row>
        </el-col>
        <el-col :span="6" :offset="4">
            <el-row>
              <el-col>
            <el-form-item label="Logo(60 x 60)："  >
              <input type="hidden" name="content.logoUrl" value />
              <input type="hidden" id="logo" name="content.logoUrl" />
              <div class="adminLogo d-inlineBlock" v-if="logoUrl=='img'">
                <img class="verticalBottom adminLogoImg" id="_iconImg" alt :src="content.logoUrl" v-if="content.logoUrl!=''"/>
                <i v-else class="el-icon-plus" @click="selectIcon"></i>

              </div>
              <div class="logoBtn" style="display: inline-block">
                <el-button class="obpm-btn-default bluebgColor" plain @click="selectIcon" type="primary">{{$t('choose')}}</el-button>
                <el-button type="danger" plain @click="cleanIcon" class="redBgColor">{{$t('clean')}}</el-button>
              </div>
            </el-form-item>
          </el-col>
            </el-row>
            <el-row>
              <el-col>
            <el-form-item :label="$t('description')"  >
              <el-input 
                :rows="3" 
                type="textarea" 
                placeholder="请输入内容"
                maxlength="200"
                show-word-limit
                v-model="content.description"
              ></el-input>
            </el-form-item>
          </el-col>
            </el-row>
       </el-col>
      </el-row>
      </el-form>
    </div>
    <icon_select
      :visible.sync="iconSelectCheck"
      :logoUrl="content.logoUrl"
      @select-ok="onSelectIconOk"
      v-if="iconSelectCheck"
    />
    </el-main>

  </el-container>
</template>

<script>
import { nameCheck } from "@/utils";
import icon_select from "@/components/icon_select.vue";

export default {
  components: {
    icon_select,
  },
  created() {
    this.headerArr={iconfont:'icon-icon_yzh_off',content:this.$t('enterprise_info'),btnArr:[{type:'primary',name:"save",label:this.$t('save')},{name:"exit",label:this.$t('exit')}] }
  },
  data() {
    return {
      content: {
        name: "",
        systemName: "",
        smsMemberCode: "",
        smsMemberPwd: "",
        description: "",
        status: 1,
        logoUrl: "",
      },
      logoUrl: "img",
      iconSelectCheck: false,
      fontIconColor: "#000000",
      skins: [],
      rules: {
        name: [
          { required: true, message: this.$t('fill_domain_tenant_name'), trigger: "blur" },
          {
            validator: nameCheck,
            trigger: "blur",
          },
        ],
      },
      haveImg: "noLogo",
      loading:false,//加载
      headerArr:{}
    };
  },
  computed: {
    status: {
      get() {
        return this.content.status == 1;
      },
      set(value) {
        this.content.status = value ? 1 : 0;
      },
    },
  },
  methods: {
    onBtnClick(name){
      if(name=='save'){this.onSave('form')}
      else if(name=='exit'){this.$emit('exit')}
    },
    onSave(formName) {
      if (this.content.name == "") {
        this.$message({
          message: this.$t('fill_domain_tenant_name'),
          type: "error",
        });
        return false;
      }
      if (this.logoUrl == "icon") {
        this.content.logoUrl = this.content.logoUrl + this.fontIconColor;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading=true
            this.$api.createDomain(this.content, {
            onSucess: (resp) => {
            this.loading=false
          if (resp && resp.data.errcode == 0) {
            this.$message({
              message: this.$t('msg_save_success'),
              type: "success",
            });
            this.$emit("exit");
          } else {
            this.$message({
              message: resp.data.errmsg,
              type: "error",
            });
          }
        },
      });
        }
      });
   
    },
    testSMS() {
      this.$prompt(this.$t('msg_require_tel'), this.$t('msg_tip'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        inputPattern: /^1\d{10}$/,
        inputErrorMessage: this.$t("msg_incorrect_phone"),
      })
        .then(({ value }) => {
          this.$api.testSMS(this.content.id, value, {
            onSucess: (resp) => {
              if (resp && resp.data.data.type == "success") {
                this.$message({
                  message: this.$t("msg_send_success"),
                  type: "success",
                });
              } else {
                this.$message({
                  message: resp.data.data.message,
                  type: "error",
                });
              }
            },
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("msg_cancel"),
          });
        });
    },
    selectIcon() {
      this.iconSelectCheck = true;
    },
    onSelectIconOk(item) {
      if (item) {
        if (item.path) {
          this.logoUrl = "img";
          this.content.logoUrl = this.$api.getLogoUrl(item.path);
          this.haveImg = "adminLogo";
        } else if (item.filePath) {
          this.logoUrl = "img";

          this.content.logoUrl = this.$api.getLogoUrl(item.filePath);
          this.haveImg = "adminLogo";
        } else {
          this.$message({
            type: "error",
            message: this.$t("msg_choose_fail"),
          });
        }
      }
    },
    cleanIcon() {
      this.content.logoUrl = "";
      this.haveImg = "noLogo";
    },
  },
};
</script>
<style scoped>
@import "../assets/css/font-awesome.min.css";
</style>
<style lang="scss" scoped>
</style>